<!--
 * @Author: 傅湘乐 fuxiangle@dhcc.com.cn
 * @Date: 2024-01-17 14:44:55
 * @LastEditors: 傅湘乐 fuxiangle@dhcc.com.cn
 * @LastEditTime: 2024-01-18 09:31:44
 * @FilePath: \sloth-admin-vue3-vite3\src\views\assembly\tableSelect\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<el-main>
		<el-card shadow="never" header="单选">
			<s-table-select v-model="value2" :apiObj="apiObj" :params="params" :table-width="600" :props="props" @change="change">
				<el-table-column prop="id" label="ID" width="180"></el-table-column>
				<el-table-column prop="username" label="姓名"></el-table-column>
			</s-table-select>
		</el-card>
		<div style="height: 15px"></div>
		<el-card shadow="never" header="多选">
			<s-table-select
				v-model="value"
				:apiObj="apiObj"
				:table-width="700"
				multiple
				clearable
				collapse-tags
				:params="params"
				collapse-tags-tooltip
				:props="props"
				@change="change"
			>
				<template #header="{ form, submit }">
					<el-form :inline="true" :model="form">
						<el-form-item>
							<el-select v-model="form.gender" placeholder="性别" clearable :teleported="false">
								<el-option label="男" value="1"></el-option>
								<el-option label="女" value="2"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="submit">查询</el-button>
						</el-form-item>
					</el-form>
					<el-alert title="自定义FORM插糟 传递了form对象和提交方法" type="info" />
				</template>
				<el-table-column prop="id" label="ID" width="100"></el-table-column>
				<el-table-column prop="username" label="姓名" width="100"></el-table-column>
				<el-table-column prop="email" label="邮箱" width="180"></el-table-column>
				<el-table-column prop="gender" label="性别">
					<template #default="scope">
						{{ scope.row.gender == 1 ? '女' : '男' }}
					</template>
				</el-table-column>
			</s-table-select>
		</el-card>
	</el-main>
</template>
<script>
import sTableSelect from './components/sTableSelect.vue'
import { getUserList } from '@/api/modules/user'
export default {
	name: 'TableSelect',
	components: {
		sTableSelect
	},
	data() {
		return {
			apiObj: getUserList,
			params: {
				username: '蔡秀兰'
			},
			value: [
				{
					id: '76',
					username: '何芳'
				},
				{
					id: '72',
					username: '高杰'
				}
			],
			value2: {
				id: '76',
				username: '何芳'
			},
			props: {
				label: 'username',
				value: 'id',
				keyword: 'keyword'
			}
		}
	},
	methods: {
		//值变化
		change(val) {
			this.$message('change事件，返回详情查看控制台')
			console.log(val)
		}
	}
}
</script>
